<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 600px;
            height: 600px;
            border: 1px solid;
            margin: 0 auto;
            position: relative;
        }
    </style>
</head>

<body>
    <div class="container">


    </div>
    <script>
        // 抽象方块类，方块的构造函数。

        function Rect(x, y, color, container) {
            this.ele = null; // 方块的元素；
            this.x = x;  // 方块x轴所在的位置
            this.y = y;
            this.color = color; // 方块的颜色 ；
            this.container = container;
            this.createRect();
        }
        Rect.prototype.createRect = function () {  // 根据 方块的属性 生成对应的dom结构；
            this.ele = document.createElement("div");  // 创建方块元素
            // 设置方块元素的属性 
            this.ele.style.left = this.x + "px";
            this.ele.style.top = this.y + "px";
            this.ele.style.position = "absolute";  // 设置方块的绝对定位属性 ；
            this.ele.style.background = this.color;
            this.ele.style.border = "1px solid";
            this.ele.style.width = "50px";
            this.ele.style.height = "50px";
            // 把方块元素添加到容器里去
            this.container.appendChild(this.ele);
        }



        // 定义一个 蛇类 ，蛇是由方块构成的；
        function Snake(container) {
            // 由多个方块构成 ，把方块对象存起来；
            this.snakeArr = []; // 存放蛇身体方块的数组；
            this.container = container;
            // 蛇设置一个方向属性
            this.dir = "right";
            this.createBody();
        }
        Snake.prototype.createBody = function () {
            // 创建蛇的身体 ； 又5个方块构成；
            for (var i = 0; i < 5; i++) {
                if (i == 4) {
                    // 是蛇头的方块
                    var rect = new Rect(i * 50, 0, "red", this.container);
                } else {
                    // 是蛇身体的方块 
                    var rect = new Rect(i * 50, 0, "blue", this.container);
                }
                this.snakeArr.push(rect); // 把实例化的方块对象 放在 snakeArr里存放起来
            }
        }
        Snake.prototype.move = function () {
            // 蛇的移动 
            // 1.先把蛇头移动一个位置 。
            // 2.然后 删除蛇身体的最后一个元素 。
            // 3.之后再以前蛇头的地方添加一个方块。
            // 获取蛇头: snakeArr的最后一个 
            console.log(this.snakeArr);
            var head = this.snakeArr[this.snakeArr.length - 1];
            // 先获取蛇头当前的位置
            var numx = parseInt(head.ele.style.left);  // 当前蛇头的left的位置
            var numy = parseInt(head.ele.style.top);  // 当前蛇头的top的位置；
            // console.log("left",numx);
            // console.log("top",numy);

            // 在之前头部的位置 添加一个方块对象；
            // console.log(this.snakeArr.length-2);
            this.snakeArr.splice(this.snakeArr.length - 1, 0, new Rect(numx, numy, "blue", this.container));


            switch (this.dir) {
                case 'right':
                    // 蛇头移动一个位置
                    head.ele.style.left = (numx + 50) + "px";
                    break;
                case 'left':
                    head.ele.style.left = (numx - 50) + "px";
                    break;
                case 'up':
                    head.ele.style.top = (numy - 50) + "px";
                    break;
                case 'down':
                    head.ele.style.top = (numy + 50) + "px";
                    break;
                default:
                    console.log("方向错误");
                    break
            }


            // 删除蛇身体的最后一个元素
            // 删除 数组的第一个元素；
            var res = this.snakeArr.shift();  // 把数组的第一个元素删除；
            // 删除第一个 dom里的元素；
            // console.log(res);
            res.ele.remove();
        }


        var snake = new Snake(document.querySelector(".container"));
        setInterval(function () {
            snake.move();
        }, 1000)


        // 监听键盘事件 
        document.onkeydown = function (e) {
            var key = e.key;
            console.log(key);
            switch (key) {
                case 'ArrowRight':
                    if (snake.dir !== "left") {
                        snake.dir = "right";
                    }
                    break;
                case 'ArrowLeft':
                    if (snake.dir !== "right") {
                        snake.dir = "left";
                    }
                    break;
                case 'ArrowUp':
                    if (snake.dir !== "down") {
                        snake.dir = "up";
                    }
                    break;
                case 'ArrowDown':
                    if (snake.dir !== "up") {
                        snake.dir = "down";
                    }
                    break;
                default:
                    console.log("方向键错误");
                    break;
            }
        }




    </script>
</body>

</html>